<div id='notification-legend' aria-hidden='true'>
  {{#each buttonData}}
    <span><i class='{{icon}}' /> {{title}}</span>
  {{/each}}
</div>

{{#each eventGroups}}
  <table cellspacing="0"
         class="notification-prefs-table table
                table-columns-striped table-bordered">
    <caption class="screenreader-only">
      {{#t "captions.notification_preferences"}}
        {{name}} notification events and settings
      {{/t}}
    </caption>

    <thead>
      <tr class="grouping">
        <th scope="col"><h2 class="group-name">{{name}}</h2></th>
        {{#each ../channels}}
          <th class="comm-channel" scope="col">
            <div class="channel-name">{{name}}</div>
            <div class="channel-addr">{{address}}</div>
          </th>
        {{/each}}
      </tr>
    </thead>

    <tbody>
      {{#each items}}
        <tr>
          <th class="comm-event" scope="row">
            <div class="row-title-cell">
              <span class="category-name show-popover"
                    title="<div class='popover-title'>{{title}}</div>
                           <div class='popover-content'>
                             <p>{{description}}</p>
                           </div>">
                {{title}}
              </span>

              {{#if checkName}}
                <div class="user-preference">
                  <label class="checkbox" for="{{checkID}}">
                    {{checkbox checkName
                      id=checkID
                      class="user-pref-check"
                      checked=checkedState}}
                    {{checkLabel}}
                  </label>
                </div>
              {{/if}}
            </div>
          </th>

          {{#each policyCells}}
            <td class='comm-event-option' data-selection='{{selection}}' data-category='{{category}}' data-channelId='{{channelId}}'>
              <div class='comm-event-option-contents'>
              </div>
            </td>
          {{/each}}

        </tr>
      {{/each}}
    </tbody>
  </table>
{{/each}}
